import type { Metadata } from "next";

import Link from "next/link";

import { notFound } from "next/navigation";

import { Card, SectionHeader } from "@/components/ui";

import { DataTable, type Column, type Row } from "@/components/data-table";

import { SourceLink } from "@/components/source-link";

import { PartyTag } from "@/components/party-tag";

import { PositionTag } from "@/components/position-tag";

import { MemberAvatar } from "@/components/member-avatar";

import { StatusPill, classifyStatus, type StatusVariant } from "@/components/status-pill";

import {

  getMember,

  type MemberVote,

  type MemberAmendment,

} from "@/lib/feed";

import { MemberVoteYear } from "@/components/member-vote-year";

import { formatDate } from "@/lib/format";

import { CiteThis } from "@/components/cite-this";

export const revalidate = 300;

const STATUS_SHORT: Record<StatusVariant, string> = {

  passed: "Passed",

  failed: "Failed",

  held: "In committee",

  pending: "Introduced",

  neutral: "Introduced",

};

export function generateMetadata({

  params,

}: {

  params: { id: string };

}): Metadata {

  const member = getMember(params.id);

  if (!member) return { title: "Member not found" };

  return {

    title: `${member.name} (${member.partyCode}-${member.state})`,

    description: `Recorded votes, sponsored bills, and amendments for ${member.name}.`,

  };

}

function formatDistrict(chamber: string, district: number | null): string {

  if (chamber === "senate") return "";

  if (district === null || district <= 0) return "At-Large";

  return `District ${district}`;

}

export default function MemberDetailPage({

  params,

}: {

  params: { id: string };

}) {

  const member = getMember(params.id);

  if (!member) notFound();

  return (

    <div

      className="mx-auto w-full max-w-[860px] overflow-x-hidden px-6 sm:px-8"

      style={{

        paddingTop: "clamp(32px, 6vw, 56px)",

        paddingBottom: "clamp(48px, 8vw, 80px)",

      }}

    >

      <Link

        href="/members"

        className="focus-ring tap no-underline hover:underline"

        style={{

          display: "inline-flex",

          alignItems: "center",

          gap: "8px",

          fontFamily: "var(--font-mono), ui-monospace, monospace",

          fontSize: "13px",

          letterSpacing: "0.08em",

          color: "var(--dk-signal)",

          marginBottom: "32px",

        }}

      >

        ← Representatives

      </Link>

      {

}

      <header

        style={{

          borderBottom: "1px solid var(--dk-line)",

          paddingBottom: "clamp(28px, 5vw, 48px)",

          marginBottom: "clamp(28px, 5vw, 48px)",

        }}

      >

        {}

        <p

          className="label"

          style={{

            color: "var(--dk-signal)",

            marginBottom: "20px",

            display: "flex",

            alignItems: "center",

            gap: "8px",

            fontSize: "12px",

            letterSpacing: "0.14em",

          }}

        >

          <span

            aria-hidden="true"

            style={{

              width: "5px",

              height: "5px",

              borderRadius: "50%",

              background: "var(--dk-signal)",

              display: "inline-block",

              flexShrink: 0,

            }}

          />

          {member.chamber === "senate" ? "U.S. Senate" : "U.S. House"} · {member.state}

          {member.chamber !== "senate" && formatDistrict(member.chamber, member.district)

            ? ` · ${formatDistrict(member.chamber, member.district)}`

            : ""}

        </p>

        <div className="flex flex-col gap-5 sm:flex-row sm:items-start">

          <MemberAvatar

            name={member.name}

            photoUrl={member.photoUrl}

            size="lg"

            className="shrink-0"

          />

          <div className="min-w-0 flex-1">

            <h1

              className="font-display text-paper"

              style={{

                fontSize: "clamp(2.2rem, 7vw, 3.75rem)",

                fontWeight: 900,

                lineHeight: 1.0,

                letterSpacing: "-0.01em",

                wordSpacing: "0.06em",

                textTransform: "uppercase",

                marginBottom: "20px",

              }}

            >

              {member.name}

            </h1>

            <div className="flex flex-wrap items-center gap-3">

              <PartyTag party={member.partyCode} />

              <span className="font-mono text-[13px] text-ash">

                {member.party || "Party not on record"}

              </span>

              <span className="label text-ash-2" aria-hidden="true">·</span>

              <span className="font-mono text-[13px] text-ash-2">

                {member.voteCount} recorded position{member.voteCount === 1 ? "" : "s"} on file

              </span>

            </div>

          </div>

        </div>

        {member.photoUrl ? (

          <p className="label mt-3 text-ash-2">

            Headshot from the official congressional image record. Official biography below.

          </p>

        ) : (

          <p className="label mt-3 text-ash-2">

            No official headshot on file for this member.

          </p>

        )}

      </header>

      {}

      <div className="grid gap-4 sm:grid-cols-3">

        <Card className="p-5">

          <p className="label mb-2">Party</p>

          <PartyTag party={member.partyCode} />

          <p className="label mt-2 text-ash-2">{member.party || "-"}</p>

        </Card>

        <Card className="p-5">

          <p className="label mb-2">State / district</p>

          <p className="font-mono text-[13px] text-paper">{member.state}</p>

          <p className="label mt-2 text-ash-2">

            {member.chamber === "senate"

              ? "Statewide"

              : formatDistrict(member.chamber, member.district) || "Statewide"}

          </p>

        </Card>

        <Card className="p-5">

          <p className="label mb-2">Official record</p>

          <SourceLink url={member.sourceUrl} label="Bioguide" />

          <p className="label mt-2 text-ash-2">{member.bioguide}</p>

        </Card>

      </div>

      <div className="mt-10 grid gap-8 lg:grid-cols-[1.3fr_1fr]">

        {

}

        <div className="min-w-0">

          <SectionHeader

            eyebrow={`Most recent · ${Math.min(member.votes.length, 12)} of ${member.voteCount.toLocaleString()}`}

            title="How they voted"

          />

          {member.votes.length === 0 ? (

            <Card className="p-5">

              <p className="font-mono text-[13px] text-ash-2">

                No recorded vote positions are linked to this member.

              </p>

            </Card>

          ) : (

            <RecentVotes votes={member.votes.slice(0, 12)} />

          )}

        </div>

        {}

        <div className="min-w-0">

          <SectionHeader

            eyebrow={`Sponsored · ${member.sponsorships.length}`}

            title="Bills introduced"

          />

          {member.sponsorships.length === 0 ? (

            <Card className="p-5">

              <p className="font-mono text-[13px] text-ash-2">

                No sponsored bills are linked to this member in the current record.

              </p>

            </Card>

          ) : (

            <Card className="divide-y divide-[color:var(--dk-line)]">

              {member.sponsorships.slice(0, 12).map((b) => (

                <div key={b.billId} className="p-4">

                  <Link

                    href={b.billHref}

                    className="focus-ring font-mono text-[13px] text-paper underline underline-offset-4 hover:text-paper"

                  >

                    {b.number}

                  </Link>

                  <p className="mt-1 font-mono text-[12px] text-ash">

                    {b.title}

                  </p>

                  <div className="mt-2 flex items-center gap-2">

                    <StatusPill variant={classifyStatus(b.status)}>

                      {STATUS_SHORT[classifyStatus(b.status)]}

                    </StatusPill>

                    <span className="label text-ash-2">{formatDate(b.updatedAt)}</span>

                  </div>

                </div>

              ))}

            </Card>

          )}

        </div>

      </div>

      {}

      <div className="mt-10">

        <SectionHeader

          eyebrow={`By year · ${member.votesByYear.length} year${member.votesByYear.length === 1 ? "" : "s"}`}

          title="Vote record, year by year"

          description="Every recorded roll-call position this member has taken, grouped by year. Open a year to read each vote and how they voted. Newest year first."

        />

        {member.votesByYear.length === 0 ? (

          <Card className="p-5">

            <p className="font-mono text-[13px] text-ash-2">

              No recorded vote positions are linked to this member.

            </p>

          </Card>

        ) : (

          <>

            {}

            <ul className="mb-5 flex flex-wrap gap-2">

              {member.votesByYear.map((yg) => (

                <li

                  key={yg.year ?? "undated"}

                  className="label inline-flex min-h-[44px] items-center gap-2 rounded-[3px] border border-line px-2.5 text-ash"

                >

                  <span className="text-paper">{yg.year ?? "Undated"}</span>

                  <span className="text-ash-2">{yg.count}</span>

                </li>

              ))}

            </ul>

            {

}

            <div className="space-y-3">

              {member.votesByYear.map((yg, i) => (

                <MemberVoteYear

                  key={yg.year ?? "undated"}

                  bioguide={member.bioguide}

                  year={yg.year}

                  count={yg.count}

                  defaultOpen={i === 0}

                />

              ))}

            </div>

          </>

        )}

      </div>

      {}

      {member.amendments.length > 0 ? (

        <div className="mt-10">

          <SectionHeader

            eyebrow={`Amendments · ${member.amendments.length}`}

            title="Amendments offered"

          />

          <MemberAmendmentsTable amendments={member.amendments} />

        </div>

      ) : null}

      <div className="mt-12 border-t border-line pt-6">

        <p className="label text-ash-2">

          Vote positions and sponsorships from clerk.house.gov, senate.gov, and congress.gov. No comment or reaction surface appears here, by policy.

        </p>

      </div>

      {}

      <div className="mt-8">

        <p className="label mb-4 text-ash">Cite this record</p>

        <CiteThis

          kind="member"

          title={`${member.name} (${member.partyCode}-${member.state}) - Congressional Record`}

          permalink={`https://usdocket.org${member.href}`}

          sourceUrl={member.sourceUrl}

        />

      </div>

    </div>

  );

}

function RecentVotes({ votes }: { votes: MemberVote[] }) {

  return (

    <Card className="divide-y divide-[color:var(--dk-line)]">

      {votes.map((v) => (

        <div key={v.voteId} className="flex items-start justify-between gap-3 p-4">

          <div className="min-w-0 flex-1">

            <Link

              href={v.voteHref}

              className="focus-ring block break-words font-mono text-[13px] text-paper underline underline-offset-4 hover:text-paper"

            >

              {v.question || v.result}

            </Link>

            <p className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1">

              <span className="label text-ash-2">{v.chamber}</span>

              <span className="label text-ash-2" aria-hidden="true">·</span>

              <span className="label tabular-nums text-ash-2">{formatDate(v.date)}</span>

              <span className="label text-ash-2" aria-hidden="true">·</span>

              <span className="label text-ash-2">{v.result}</span>

            </p>

          </div>

          <PositionTag position={v.position} className="mt-0.5 shrink-0" />

        </div>

      ))}

    </Card>

  );

}

function MemberAmendmentsTable({

  amendments,

}: {

  amendments: MemberAmendment[];

}) {

  const columns: Column[] = [

    { key: "amdt", header: "Amendment", cardTitle: true },

    { key: "bill", header: "Bill" },

    { key: "status", header: "Status" },

    { key: "source", header: "Source", align: "right" },

  ];

  const rows: Row[] = amendments.map((a) => ({

    key: a.amendmentId,

    cells: {

      amdt: <span className="text-paper">{a.type} {a.number}</span>,

      bill:

        a.billHref ? (

          <Link

            href={a.billHref}

            className="focus-ring rounded-sm text-ash underline underline-offset-4 hover:text-paper"

          >

            Bill {a.billId}

          </Link>

        ) : (

          <span className="text-ash-2">-</span>

        ),

      status: <span className="uppercase text-ash-2">{a.status || "-"}</span>,

      source: <SourceLink url={a.sourceUrl} />,

    },

  }));

  return (

    <DataTable

      caption="Amendments offered by this member: amendment, bill, status, source."

      cardLabel="Amendments"

      columns={columns}

      rows={rows}

    />

  );

}